<div class="content-section implementation">
    <h3 class="first">Basic+Facets+Templating+Paginator+Sort+Filter+Selection+Resize+Reorder+ ColToggler+ Export</h3>
    <p-header>List of Cars</p-header>
    <p-footer>There are 10 cars</p-footer>
    <div class="ui-widget-header" style="padding:4px 10px;border-bottom: 0 none">
        <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
        <input #gb type="text" pInputText size="50" placeholder="Global Filter">
    </div>

    <p-dataTable [value]="cars" [loading]="loading"  [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" [globalFilter]="gb" selectionMode="multiple" [(selection)]="selectedCars" dataKey="vin" resizableColumns="true" columnResizeMode="expand" reorderableColumns="true" exportFilename="cars" #dt>
      <p-header>
          <div style="text-align:left">
              <p-multiSelect [options]="columnOptions" [(ngModel)]="cols"></p-multiSelect>
          </div>
          <div class="ui-helper-clearfix">
             <button type="button" pButton icon="fa-file-o" iconPos="left" label="CSV" (click)="dt.exportCSV()" style="float:left;margin-top:20px"></button>
         </div>
      </p-header>
        <p-column *ngFor="let col of cols" field="vin" header="Vin (startsWith)" [filter]="true" filterPlaceholder="Search" [sortable]="true" ></p-column>
        <p-column field="year" header="Year ({{yearFilter||'No Filter'}})" [filter]="true" filterMatchMode="equals" [sortable]="true">
          <ng-template pTemplate="filter" let-col>
              <i class="fa fa-close" (click)="yearFilter=null;dt.filter(null,col.field,col.filterMatchMode)"></i>
              <p-slider [style]="{'width':'100%','margin-top':'8px'}" [(ngModel)]="yearFilter" [min]="1970" [max]="2010" (onSlideEnd)="dt.filter($event.value,col.field,col.filterMatchMode)"></p-slider>
          </ng-template>
        </p-column>
        <p-column field="brand" header="Brand" [sortable]="true" header="Brand (Custom)" [filter]="true" [style]="{'overflow':'visible'}" filterMatchMode="equals">
          <ng-template pTemplate="filter" let-col>
             <p-dropdown [options]="brands" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-dropdown>
         </ng-template>
        </p-column>
        <p-column field="color" [sortable]="true"  header="Color (Custom)" [filter]="true" filterMatchMode="in" [style]="{'overflow':'visible'}">
            <ng-template pTemplate="filter" let-col>
                <p-multiSelect [options]="colors" defaultLabel="All Colors" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>
            </ng-template>
        </p-column>
        <p-column styleClass="col-button">
           <ng-template pTemplate="header">
               <button type="button" pButton icon="fa-refresh"></button>
           </ng-template>
           <ng-template let-car="rowData" pTemplate="body">
               <button type="button" pButton (click)="selectCar(car)" icon="fa-search"></button>
           </ng-template>
       </p-column>
       <p-footer>
            <ul>
                <li *ngFor="let car of selectedCars" style="text-align: left">{{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}</li>
            </ul>
        </p-footer>
    </p-dataTable>
    <h3> Editable+Scroll+ Responsive</h3>
    <button pButton type="button" (click)="toggle()" style="margin-bottom:10px" label="Toggle" icon="fa-list"></button>
   <p-dataTable [value]="cars" [editable]="true" scrollable="true" scrollHeight="200px" frozenWidth="200px" unfrozenWidth="600px" [style]="{'margin-top':'30px'}"  [rows]="10"   [stacked]="stacked">
      <p-column field="vin" header="Vin" [editable]="true"></p-column>
      <p-column field="year" header="Year" [editable]="true"></p-column>
      <p-column field="brand" header="Brand" [editable]="true" [style]="{'overflow':'visible'}">
          <ng-template let-col let-car="rowData" pTemplate="editor">
              <p-dropdown [(ngModel)]="car[col.field]" [options]="brands" [autoWidth]="false" [style]="{'width':'100%'}" required="true"></p-dropdown>
          </ng-template>
      </p-column>
      <p-column field="color" header="Color" [editable]="true"></p-column>
      <p-column field="saleDate" header="Sale Date" [editable]="true" [style]=" {'overflow':'visible' }">
          <ng-template let-col let-car="rowData" pTemplate="body">
               {{car[col.field]|date }}
          </ng-template>
          <ng-template let-col let-car="rowData" pTemplate="editor">
              <p-calendar [(ngModel)]="car[col.field]"></p-calendar>
          </ng-template>
      </p-column>
  </p-dataTable>
  <h3>ColGroup</h3>
  <p-dataTable [value]="sales">
    <p-headerColumnGroup>
        <p-row>
            <p-column header="Brand" rowspan="3"></p-column>
            <p-column header="Sale Rate" colspan="4"></p-column>
        </p-row>
        <p-row>
            <p-column header="Sales" colspan="2"></p-column>
            <p-column header="Profits" colspan="2"></p-column>
        </p-row>
        <p-row>
            <p-column header="Last Year"></p-column>
            <p-column header="This Year"></p-column>
            <p-column header="Last Year"></p-column>
            <p-column header="This Year"></p-column>
        </p-row>
    </p-headerColumnGroup>

    <p-column field="brand"></p-column>
    <p-column field="lastYearSale"></p-column>
    <p-column field="thisYearSale"></p-column>
    <p-column field="lastYearProfit"></p-column>
    <p-column field="thisYearProfit"></p-column>

    <p-footerColumnGroup>
        <p-row>
            <p-column footer="Totals:" colspan="3"></p-column>
            <p-column footer="$506,202"></p-column>
            <p-column footer="$531,020"></p-column>
        </p-row>
    </p-footerColumnGroup>
</p-dataTable>
<h3>Expand</h3>
<p-dataTable [value]="cars" expandableRows="true">
    <p-column expander="true" styleClass="col-icon"></p-column>
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
    <ng-template let-car pTemplate="rowexpansion">
        <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
            <div class="ui-grid-row">
                <div class="ui-grid-col-3" style="text-align:center">
                    <i class="fa fa-search" (click)="showCar(car)" style="cursor:pointer;float:left;margin-top:40px"></i>
                    <img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif">
                </div>
                <div class="ui-grid-col-9">
                    <div class="ui-grid ui-grid-responsive ui-grid-pad">
                        <div class="ui-grid-row">
                            <div class="ui-grid-col-2 label">Vin: </div>
                            <div class="ui-grid-col-10">{{car.vin}}</div>
                        </div>
                        <div class="ui-grid-row">
                            <div class="ui-grid-col-2 label">Year: </div>
                            <div class="ui-grid-col-10">{{car.year}}</div>
                        </div>
                        <div class="ui-grid-row">
                            <div class="ui-grid-col-2 label">Brand: </div>
                            <div class="ui-grid-col-10">{{car.brand}}</div>
                        </div>
                        <div class="ui-grid-row">
                            <div class="ui-grid-col-2 label">Color: </div>
                            <div class="ui-grid-col-10">{{car.color}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</p-dataTable>

<p-dialog header="Car Details" [(visible)]="dialogVisible" [responsive]="true" showEffect="fade" [modal]="true" width="250">
    <div class="ui-grid ui-grid-responsive ui-grid-pad" *ngIf="selectedCar">
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="vin" class="label">Vin</label></div>
            <div class="ui-grid-col-8">{{selectedCar.vin}}</div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="brand" class="label">Year</label></div>
            <div class="ui-grid-col-8">{{selectedCar.year}}</div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="brand" class="label">Brand</label></div>
            <div class="ui-grid-col-8">{{selectedCar.brand}}</div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="color" class="label">Color</label></div>
            <div class="ui-grid-col-8">{{selectedCar.color}}</div>
        </div>
    </div>
</p-dialog>
<h3>Crud</h3>
<p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)"  >
    <p-header>CRUD for Cars</p-header>
    <p-column field="vin" header="Vin" ></p-column>
    <p-column field="year" header="Year" ></p-column>
    <p-column field="brand" header="Brand" ></p-column>
    <p-column field="color" header="Color" ></p-column>
    <p-footer><div class="ui-helper-clearfix" style="width:100%"><button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()" label="Add"></button></div></p-footer>
</p-dataTable>

<p-dialog header="Car Details" [(visible)]="displayDialog"  showEffect="fade" [modal]="true">
    <div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="car">
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="vin">Vin</label></div>
            <div class="ui-grid-col-8"><input pInputText id="vin" [(ngModel)]="car.vin" /></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="year">Year</label></div>
            <div class="ui-grid-col-8"><input pInputText id="year" [(ngModel)]="car.year" /></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="brand">Brand</label></div>
            <div class="ui-grid-col-8"><input pInputText id="brand" [(ngModel)]="car.brand" /></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="color">Color</label></div>
            <div class="ui-grid-col-8"><input pInputText id="color" [(ngModel)]="car.color" /></div>
        </div>
    </div>
    <p-footer>
        <div class="ui-dialog-buttonpane ui-helper-clearfix">
            <button type="button" pButton icon="fa-close" (click)="delete()" label="Delete"></button>
            <button type="button" pButton icon="fa-check" (click)="save()" label="Save"></button>
        </div>
    </p-footer>
</p-dialog>

</div>
